<template>
  <div id="ChartsPieNoChangeNum"></div>
</template>
<script setup>
import * as echarts from "echarts";
let myChart = shallowRef();
import resize from "../../../mixin/resize.js";
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("ChartsPieNoChangeNum"));
  resize(myChart.value);
  getServerData();
});
let props = defineProps(["pieChangeData"]);
let pieData = ref([]);
watch(
  () => props.pieChangeData,
  () => {
    console.log("props.pieDisposeData", props.pieDisposeData);
    pieData.value[0] = {
      name: "已更换量",
      value: props.pieChangeData.x,
      onLine: props.pieChangeData.py,
      offLine: 5,
    };
    pieData.value[1] = {
      name: "未更换量",
      value: props.pieChangeData.y,
      onLine: props.pieChangeData.ny,
      offLine: 5,
    };
    getServerData();
  },
  { deep: true }
);

let getServerData = () => {
  myChart.value.setOption({
    backgroundColor: "#fff",
    color: [ "#0874FA","#FF7E39",],
    title: [
      {
        text:props.pieChangeData.y,
        top: "40%",
        textAlign: "center",
        left: "50%",
        textStyle: {
          color: "#333",
          fontSize: 40,
          fontFamily: "PingFangSC",
        },
      },
      {
        text: "未更换量",
        top: "58%",
        textAlign: "center",
        left: "50%",
        textStyle: {
          color: "#999",
          fontSize: 18,
          fontFamily: "PingFangSC",
        },
      },
    ],
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "cross",
      },
      triggerOn: "mousemove",
      confine: false,
      position: function (point) {
        // 自定义 tooltip 的位置
        return { top: point[1], left: point[0] };
      },

      formatter: function (params) {
        return (
          `<br> ${params.data.name}: ` +
          params.value +
          "kg" +
          "<br>占比: " +
          params.percent +
          "%"
        );
      },
    },
    // legend: {
    //   orient: "vertical",
    //   itemGap: 10,
    //   itemWidth: 16,
    //   itemHeight: 16,
    //   bottom: "center",
    //   right: "6%",
    //   textStyle: {
    //     color: "#000000",
    //   },
    // },
    series: [
      {
        type: "pie",
        radius: ["70%", "90%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        labelLine: {
          show: false,
        },
        selectedMode: "single",
        selectedOffset: 5,
        data: pieData.value,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#ChartsPieNoChangeNum {
  width: 100%;

  height: calc(36vh - 100px);
}
</style>
